<template>
  <div>子组件1
    接受的数据:childrenMes:{{ childrenMes }}
    接受的数据:msg2:{{ msg2.msg }}
    ====================
    <grandson></grandson>
    <button @click="changeMsg1">修改msg1</button>
    <button @click="changeMsg2">修改msg2</button>
  </div>
</template>

<script>
import grandson from "./grandson"
export default {
  components: {
    grandson
  },
  props: {
    childrenMes: {
      type: String,  //限制类型
      default: "我是默认信息"
    },
    msg2: {
      type: Object,
      required: true
    }
  },
  data () {
    return {

    }
  },
  computed: {},
  methods: {
    changeMsg1 () {
      // 因为单向数据流的原因,无法在子组件中修改父组件的状态
      // 如果非要往下修改的话: this.$emit() 把修改的数据传递到父级
      // 父级改了.子组件props接收的自然就变了
      // this.childrenMes = "子组件修改"
      this.$emit('update:childrenMes', "子组件修改")
    },
    changeMsg2 () {
      this.msg2 = "2024年2月26日 16:21:00"
    },
  },
  created () {
    this.$eventbus.$on("brotherGetMsg", (res) => {
      console.log("获取兄弟组件传值", res)
    })

  },
  mounted () {

  },
}
</script>
<style scoped></style>